<template>
    <div class="order-report-wrapper">
        <div class="order-report-container">
            <div class="report-table-form1-item word samll" style="width: 70px">日期:</div>
            <div class="report-table-form1-item">
                <el-date-picker
                    size="small"
                    v-model="time"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                </el-date-picker>
            </div>
            <!-- <el-button type="primary" size="small" @click="search(0)">日报表</el-button>
            <el-button type="primary" size="small" @click="search(1)">周报表</el-button>
            <el-button type="primary" size="small" @click="search(2)">月报表</el-button> -->
            <div class="export">
                <div class="title">总体数据</div>
                <div class="export-box">
                    <i class="el-icon-printer export-icon"></i>导出数据
                </div>
            </div>
            <div class="table">
                <el-table
                    :header-cell-style="headerCellStyle"
                    size="small"
                    :data="showList"
                    border
                    style="width: 100%"
                >
                    <el-table-column prop="companyCode" label="日期"></el-table-column>
                    <el-table-column prop="companyName" label="预期分润"></el-table-column>
                    <el-table-column prop="companyCode" label="有订单商家数"></el-table-column>
                    <el-table-column prop="companyCode" label="短信订单数"></el-table-column>
                    <el-table-column prop="companyCode" label="短信订单总金额"></el-table-column>
                    <el-table-column prop="companyCode" label="单店订单总额"></el-table-column>
                </el-table>
            </div>
            <!-- 分页 -->
            <div class="pagination">
                <el-pagination
                  @current-change="handleCurrentChange"
                  :current-page="currentPage"
                  :page-size="pageSize"
                  layout="prev, pager, next, total"
                  :total="pageTotal">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
export default {
    data: function () {
        return {
            time: ['', ''],
            showList: [
                {
                    companyCode: 1,
                    companyName: '宁波店'
                }
            ],
            currentPage: 1,
            pageSize: 10,
            pageTotal: 0,
            currentPage2: 1,
            pageSize2: 10,
            pageTotal2: 0
        }
    },
    mounted () {
    },
    created () {
        this.time[0] = new Date()
        this.time[1] = new Date()
    },
    watch: {
        time () {
            console.log('change')
        }
    },
    components: {},
    props: {
    },
    computed: {
        nowPage () {
            return this.$store.state.page10themeManage
        }
    },
    methods: {
        search (type) {
            console.log(this.time)
            let start = this.$dateFormat(this.time[0], 'Y-M-D')
            let end = this.$dateFormat(this.time[1], 'Y-M-D')
            console.log(start, end)
            return false
            // if (type === 0) {
            //     this.timeEnd = this.timeStart
            // } else if (type === 1) {
            //     this.timeEnd = this.$dateSunday(this.timeStart)
            // } else if (type === 2) {
            //     this.timeEnd = this.$dateMonthLast(this.timeStart)
            // }
            // console.log(this.timeStart, this.timeEnd)
        },
        handleCurrentChange (val) {
            // 换页展示
          this.currentPage = val
          this.search()
        },
        handleCurrentChange2 (val) {
            // 换页展示
          this.currentPage2 = val
          this.search2()
        }
    }
}
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
.el-tabs__nav-wrap::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background-color: #e4e7ed;
    z-index: 1;
}
.el-tabs__nav-scroll
    padding 0 22px

.order-report-wrapper
    width: 100%

    .order-report-wrapper-title
        width 100%
        height 40px
        font-size 14px
        line-height 30px
        padding-left 22px
.order-report-container
    padding 0 15px 15px
    background #fff
.report-table-form1-item
    display: inline-block
    vertical-align: bottom
    height: 32px
    margin-right: 25px
    line-height: 32px
    &.word
        margin-right: 0
    &.samll
        font-size: 15px
        text-align left
    &.big
        margin-right: 100px
.search-box
    position relative
.export
    display flex
    margin-top 15px
    justify-content space-between
    color #ff5500
    font-size 14px
    text-align right
.title
    color #000
    font-size 16px
    font-weight bold
.export-box
    display inline-block
    cursor pointer
    padding 5px 15px
.export-icon
    color #ff5500
.pagination
    padding 20px 0 0
    text-align center
// other
.pt30
    padding-top 30px
.col94
    color #949494
</style>
